﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/SystemManagement/Views/Shared/JQueryEasyUI.Master"
    Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    IndexEasyUI
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript">


    var onlyOpenTitle="欢迎使用";
        $(function () {
            //$("body").addClass("easyui-layout");
            
            $('#tt').tree({
				data: <%=ViewData["systemMenu"]%>,
                onClick: function(node){
                    addTab(node.text,node.attributes.url);
		           
                },
                loadFilter: function(rows){          
                    return convert(rows);   
                }   
			});
            //$("#home").removeClass("tabs-inner") ;
	        tabClose();
	        tabCloseEven();


        })

    function convert(rows){   
        function exists(rows, parentId){   
            for(var i=0; i<rows.length; i++){   
                if (rows[i].id == parentId) return true;   
            }   
            return false;   
        }   

        var nodes = [];   
        // get the top level nodes   
        for(var i=0; i<rows.length; i++){   
            var row = rows[i];   
            if (!exists(rows, row.parentId)){   
                nodes.push({   
                    id:row.id,   
                    text:row.text,
                    attributes:{url:row.url}
                });   
            }   
        }   
       
        var toDo = [];   
        for(var i=0; i<nodes.length; i++){   
            toDo.push(nodes[i]);   
        }   
        while(toDo.length){   
            var node = toDo.shift();    // the parent node   
            // get the children nodes   
            for(var i=0; i<rows.length; i++){   
                var row = rows[i];   
                if (row.parentId == node.id){   
                    var child = {id:row.id,text:row.text,attributes:{url:row.url}};   
                    if (node.children){   
                        node.children.push(child);   
                    } else {   
                        node.children = [child];   
                    }   
                    toDo.push(child);   
                }   
            }   
        }   
        return nodes;   
    }  


    function addTab(title, href,icon){
	var tt = $('#tabs');
	if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab    	
        tt.tabs('select', title);
        refreshTab({tabTitle:title,url:href});
	    } else {
    	    if (href){
	    	    var content = '<iframe scrolling="no" frameborder="0"  src="'+href+'" style="width:100%;height:100%;"></iframe>';
    	    } else {
	    	    var content = '未实现';
    	    }
    	    tt.tabs('add',{
	    	    title:title,
	    	    closable:true,
	    	    content:content,
	    	    iconCls:icon//||'icon-default'
    	    });

            tabClose();
	    }
    }
    /**    
     * 刷新tab
     * @cfg 
     *example: {tabTitle:'tabTitle',url:'refreshUrl'}
     *如果tabTitle为空，则默认刷新当前选中的tab
     *如果url为空，则默认以原来的url进行reload
     */
    function refreshTab(cfg){
	    var refresh_tab = cfg.tabTitle?$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected');
	    if(refresh_tab && refresh_tab.find('iframe').length > 0){
	    var _refresh_ifram = refresh_tab.find('iframe')[0];
	    var refresh_url = cfg.url?cfg.url:_refresh_ifram.src;
	    //_refresh_ifram.src = refresh_url;
	    _refresh_ifram.contentWindow.location.href=refresh_url;
	    }
    }



 function tabClose()
{


	/*双击关闭TAB选项卡*/
	$(".tabs-inner").dblclick(function(){
		var subtitle = $(this).children(".tabs-closable").text();
		$('#tabs').tabs('close',subtitle);
	})
	/*为选项卡绑定右键*/
	$(".tabs-inner").bind('contextmenu',function(e){
        if($(this).children(".tabs-closable").text()=="")
        return;

		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});

		var subtitle =$(this).children(".tabs-closable").text();

		$('#mm').data("currtab",subtitle);
		$('#tabs').tabs('select',subtitle);
		return false;
	});
}


//绑定右键菜单事件
function tabCloseEven() {

    $('#mm').menu({
        onClick: function (item) {
            closeTab(item.id);
        }
    });

    return false;
}

function closeTab(action)
{
    var alltabs = $('#tabs').tabs('tabs');
    var currentTab =$('#tabs').tabs('getSelected');
	var allTabtitle = [];
	$.each(alltabs,function(i,n){
		allTabtitle.push($(n).panel('options').title);
	})


    switch (action) {
        case "refresh":
            var iframe = $(currentTab.panel('options').content);
            var src = iframe.attr('src');
            $('#tabs').tabs('update', {
                tab: currentTab,
                options: {
                    content: createFrame(src)
                }
            })
            break;
        case "close":
            var currtab_title = currentTab.panel('options').title;
            $('#tabs').tabs('close', currtab_title);
            break;
        case "closeall":
            $.each(allTabtitle, function (i, n) {
                if (n != onlyOpenTitle){
                    $('#tabs').tabs('close', n);
				}
            });
            break;
        case "closeother":
            var currtab_title = currentTab.panel('options').title;
            $.each(allTabtitle, function (i, n) {
                if (n != currtab_title && n != onlyOpenTitle)
				{
                    $('#tabs').tabs('close', n);
				}
            });
            break;
        case "closeright":
            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);

            if (tabIndex == alltabs.length - 1){
                alert('亲，后边没有啦 ^@^!!');
                return false;
            }
            $.each(allTabtitle, function (i, n) {
                if (i > tabIndex) {
                    if (n != onlyOpenTitle){
                        $('#tabs').tabs('close', n);
					}
                }
            });

            break;
        case "closeleft":
            var tabIndex = $('#tabs').tabs('getTabIndex', currentTab);
            if (tabIndex == 1) {
                alert('亲，前边那个上头有人，咱惹不起哦。 ^@^!!');
                return false;
            }
            $.each(allTabtitle, function (i, n) {
                if (i < tabIndex) {
                    if (n != onlyOpenTitle){
                        $('#tabs').tabs('close', n);
					}
                }
            });

            break;
        case "exit":
            $('#closeMenu').menu('hide');
            break;
    }
}

    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $("body").addClass("easyui-layout");
    </script>
    <div data-options="region:'west',title:'菜单',split:true" style="width: 200px;">
        <div id="aa" class="easyui-accordion"  fit="true" >
            <div title="功能列表" data-options="selected:true" style="overflow: auto; padding: 10px;">
                <ul id="tt"></ul>
            </div>
            <div title="Title2" data-options="iconCls:'icon-reload'" style="padding: 10px;">
                content2
            </div>
            <div title="Title3">
                content3
            </div>
        </div>
    </div>
    <div data-options="region:'center'" style="padding: 5px; background: #eee;">
        <div id="tabs" class="easyui-tabs" fit="true" border="false">
            <div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home">
                <h1>
                    Welcome to jQuery UI!</h1>
            </div>
        </div>
    </div>


 
	<div id="mm" class="easyui-menu" style="width:150px;">
		<div id="tabupdate">刷新</div>
		<div class="menu-sep"></div>
		<div id="close">关闭</div>
		<div id="closeall">全部关闭</div>
		<div id="closeother">除此之外全部关闭</div>
		<div class="menu-sep"></div>
		<div id="closeright">当前页右侧全部关闭</div>
		<div id="closeleft">当前页左侧全部关闭</div>
		<div class="menu-sep"></div>
		<div id="exit">退出</div>
	</div>
 

</asp:Content>
